<template>
  <div class="furnace-material">
    <h2>炉料管理</h2>
    
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-input
        v-model="searchForm.batchNo"
        placeholder="批次号"
        class="input-item"
      />
      <el-select
        v-model="searchForm.materialType"
        placeholder="炉料种类"
        class="input-item"
      >
        <el-option label="生铁" value="生铁" />
        <el-option label="废钢" value="废钢" />
        <el-option label="球化剂" value="球化剂" />
      </el-select>
      <el-select
        v-model="searchForm.supplierId"
        placeholder="供应商"
        class="input-item"
      >
        <el-option
          v-for="supplier in supplierOptions"
          :key="supplier.value"
          :label="supplier.label"
          :value="supplier.value"
        />
      </el-select>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button @click="handleReset">重置</el-button>
    </div>

    <!-- 操作按钮 -->
    <div class="operation-bar">
      <el-button type="success" @click="handleAdd">添加炉料</el-button>
      <el-button type="primary" @click="handleImportExcel">导入Excel</el-button>
    </div>

    <!-- 数据表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="batchNo" label="批次号" width="120" />
      <el-table-column prop="materialType" label="炉料种类" width="100" />
      <el-table-column prop="supplierName" label="供应商" width="150" />
      <el-table-column prop="stockQuantity" label="库存数量" width="100" />
      <el-table-column prop="price" label="价格" width="100" />
      <el-table-column prop="inTime" label="入库时间" width="160" />
      <el-table-column prop="outTime" label="出库时间" width="160" />
      <el-table-column label="元素含量" min-width="400">
        <template #default="scope">
          <el-tooltip
            effect="dark"
            placement="top"
          >
            <template #content>
              <div>碳(C): {{scope.row.carbonContent}}</div>
              <div>硅(Si): {{scope.row.siliconContent}}</div>
              <div>锰(Mn): {{scope.row.manganeseContent}}</div>
              <div>磷(P): {{scope.row.phosphorusContent}}</div>
              <div>硫(S): {{scope.row.sulfurContent}}</div>
              <div>镁(Mg): {{scope.row.magnesiumContent}}</div>
              <div>稀土(RE): {{scope.row.rareEarthContent}}</div>
            </template>
            <el-tag size="small">查看元素含量</el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            @click="handleEdit(scope.row)"
          >编辑</el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 添加/编辑对话框 -->
    <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="60%"
    >
      <el-form :model="form" label-width="120px">
        <el-form-item label="批次号" required>
          <el-input v-model="form.batchNo" :disabled="!!form.id" />
        </el-form-item>
        <el-form-item label="炉料种类" required>
          <el-select v-model="form.materialType" placeholder="请选择炉料种类">
            <el-option label="生铁" value="生铁" />
            <el-option label="废钢" value="废钢" />
            <el-option label="球化剂" value="球化剂" />
          </el-select>
        </el-form-item>
        <el-form-item label="供应商" required>
          <el-select v-model="form.supplierId" placeholder="请选择供应商">
            <el-option
              v-for="supplier in supplierOptions"
              :key="supplier.value"
              :label="supplier.label"
              :value="supplier.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="库存数量" required>
          <el-input-number v-model="form.stockQuantity" :precision="2" :step="0.1" />
        </el-form-item>
        <el-form-item label="价格" required>
          <el-input-number v-model="form.price" :precision="2" :step="0.1" />
        </el-form-item>
        <el-form-item label="入库时间" required>
          <el-date-picker
            v-model="form.inTime"
            type="datetime"
            placeholder="选择入库时间"
          />
        </el-form-item>
        <el-form-item label="出库时间">
          <el-date-picker
            v-model="form.outTime"
            type="datetime"
            placeholder="选择出库时间"
          />
        </el-form-item>
        
        <!-- 元素含量区间 -->
        <el-divider>元素含量区间</el-divider>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="碳(C)">
              <el-input v-model="form.carbonContent" placeholder="如0.1-0.3" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="硅(Si)">
              <el-input v-model="form.siliconContent" placeholder="如0.1-0.3" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="锰(Mn)">
              <el-input v-model="form.manganeseContent" placeholder="如0.1-0.3" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="磷(P)">
              <el-input v-model="form.phosphorusContent" placeholder="如0.1-0.3" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="硫(S)">
              <el-input v-model="form.sulfurContent" placeholder="如0.1-0.3" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="镁(Mg)">
              <el-input v-model="form.magnesiumContent" placeholder="如0.1-0.3" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="稀土(RE)">
              <el-input v-model="form.rareEarthContent" placeholder="如0.1-0.3" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'FurnaceMaterialManagement',
  data() {
    return {
      // 搜索表单
      searchForm: {
        batchNo: '',
        materialType: '',
        supplierId: ''
      },
      // 表格数据
      tableData: [],
      // 分页
      currentPage: 1,
      pageSize: 10,
      total: 0,
      // 对话框
      dialogVisible: false,
      dialogTitle: '添加炉料',
      // 表单数据
      form: {
        batchNo: '',
        materialType: '',
        supplierId: '',
        stockQuantity: 0,
        price: 0,
        inTime: '',
        outTime: '',
        carbonContent: '',
        siliconContent: '',
        manganeseContent: '',
        phosphorusContent: '',
        sulfurContent: '',
        magnesiumContent: '',
        rareEarthContent: ''
      },
      // 供应商选项
      supplierOptions: []
    }
  },
  created() {
    this.fetchData()
    this.fetchSuppliers()
  },
  methods: {
    // 获取数据
    async fetchData() {
      try {
        const response = await this.$http.get('/api/furnacematerials', {
          params: {
            page: this.currentPage,
            size: this.pageSize,
            ...this.searchForm
          }
        })
        if (response.data.code === 1) {
          const data = response.data.data
          this.tableData = data.records || []
          this.total = data.total || 0
        }
      } catch (error) {
        this.$message.error('获取数据失败')
      }
    },
    // 获取供应商列表
    async fetchSuppliers() {
      try {
        const response = await this.$http.get('/api/suppliers')
        if (response.data.code === 1) {
          const suppliers = response.data.data.records || []
          this.supplierOptions = suppliers.map(item => ({
            label: item.supplierName,
            value: item.supplierId
          }))
        }
      } catch (error) {
        this.$message.error('获取供应商列表失败')
      }
    },
    // 搜索
    handleSearch() {
      this.currentPage = 1
      this.fetchData()
    },
    // 重置
    handleReset() {
      this.searchForm = {
        batchNo: '',
        materialType: '',
        supplierId: ''
      }
      this.handleSearch()
    },
    // 添加
    handleAdd() {
      this.dialogTitle = '添加炉料'
      this.form = {
        batchNo: '',
        materialType: '',
        supplierId: '',
        stockQuantity: 0,
        price: 0,
        inTime: '',
        outTime: '',
        carbonContent: '',
        siliconContent: '',
        manganeseContent: '',
        phosphorusContent: '',
        sulfurContent: '',
        magnesiumContent: '',
        rareEarthContent: ''
      }
      this.dialogVisible = true
    },
    // 编辑
    handleEdit(row) {
      this.dialogTitle = '编辑炉料'
      this.form = { ...row }
      this.dialogVisible = true
    },
    // 删除
    async handleDelete(row) {
      try {
        await this.$confirm('确认删除该炉料记录?', '提示', {
          type: 'warning'
        })
        await this.$http.delete(`/api/furnacematerials/${row.batchNo}`)
        this.$message.success('删除成功')
        this.fetchData()
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('删除失败')
        }
      }
    },
    // 提交表单
    async handleSubmit() {
      try {
        if (this.form.id) {
          await this.$http.put(`/api/furnacematerials/${this.form.batchNo}`, this.form)
        } else {
          await this.$http.post('/api/furnacematerials', this.form)
        }
        this.$message.success('保存成功')
        this.dialogVisible = false
        this.fetchData()
      } catch (error) {
        this.$message.error('保存失败')
      }
    },
    // 导入Excel
    handleImportExcel() {
      // TODO: 实现Excel导入功能
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    }
  }
}
</script>

<style scoped>
.furnace-material {
  padding: 20px;
}

.search-bar {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.input-item {
  width: 200px;
}

.operation-bar {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.dialog-footer {
  text-align: right;
}
</style> 